<template>
    <a-card :bordered="false" style="margin-top: 20px" title="实时数据">
        <div class="table-page-search-wrapper">
            <a-form v-bind="queryFormItemLayout">
                <a-row :gutter="48">
                    <a-col :md="8" :sm="24">
                        <a-form-item label="换热站">
                            <a-select v-model="queryParam.station_id"
                                      allowClear placeholder="请选择">
                                <a-select-option v-for="item in stationList"
                                                 :key="item.id">{{ item.name }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="时间间隔">
                            <a-input v-model="queryParam.interval"
                                     :min="1"
                                     style="width: 200px" type="number"/>
                            分钟
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <div class="table-operator">
            <div>
                <a-button icon="search" type="primary" @click="onSearch">查询</a-button>
            </div>
        </div>
        <div style="display: flex;flex-wrap: wrap;justify-content:space-between;">
            <a-card :class="[full['实时温度曲线'] ? 'full' : '']"
                    style="width: 48%;height: 500px;"
                    title="实时温度曲线（摄氏度）">
                <a slot="extra" href="#">
                    <!--                    <a-icon style="margin-right: 10px" type="arrow-down"-->
                    <!--                            @click="handleDownload('实时温度曲线')"/>-->
                    <a-icon type="fullscreen" @click="handleFullScreen('实时温度曲线')"/>
                </a>
                <vue-echarts :options="heatChartOptions" autoresize
                             style="width: 100%;height: 100%"></vue-echarts>
            </a-card>
            <a-card :class="[full['实时热量流量曲线'] ? 'full' : '']"
                    style="width: 48%;height: 500px" title="实时热量流量曲线">
                <a slot="extra" href="#">
                    <!--                    <a-icon style="margin-right: 10px" type="arrow-down"-->
                    <!--                            @click="handleDownload('实时温度曲线')"/>-->
                    <a-icon type="fullscreen" @click="handleFullScreen('实时热量流量曲线')"/>
                </a>
                <vue-echarts :options="flowChartOptions" autoresize
                             style="width: 100%;height: 100%"></vue-echarts>
            </a-card>
            <a-card :class="[full['实时压力曲线'] ? 'full' : '']"
                    style="width: 48%;height: 500px" title="实时压力曲线（Mpa）">
                <a slot="extra" href="#">
                    <!--                    <a-icon style="margin-right: 10px" type="arrow-down"-->
                    <!--                            @click="handleDownload('实时温度曲线')"/>-->
                    <a-icon type="fullscreen" @click="handleFullScreen('实时压力曲线')"/>
                </a>
                <vue-echarts :options="pressureChartOptions" autoresize
                             style="width: 100%;height: 100%"></vue-echarts>
            </a-card>
            <a-card :class="[full['实时设备状态'] ? 'full' : '']"
                    style="width: 48%;height: 500px" title="实时设备状态">
                <a slot="extra" href="#">
                    <!--                    <a-icon style="margin-right: 10px" type="arrow-down"-->
                    <!--                            @click="handleDownload('实时温度曲线')"/>-->
                    <a-icon type="fullscreen" @click="handleFullScreen('实时设备状态')"/>
                </a>
                <vue-echarts :options="deviceOnlineChartOptions" autoresize
                             style="width: 100%;height: 100%"></vue-echarts>
            </a-card>
        </div>
    </a-card>
</template>
<script>
import {api_station, api_station_data_current} from "@/api/api";
import {DownloadFile} from '@/utils/common'
import echarts from 'echarts/lib/echarts'

export default {
    data() {
        return {
            request: api_station_data_current,
            queryFormItemLayout: {
                labelCol: {
                    xs: {span: 24},
                    sm: {span: 5},
                },
                wrapperCol: {
                    xs: {span: 24},
                    sm: {span: 16},
                },
            },
            queryParam: {
                station_id: '',
                interval: 5
            },
            stationList: [],
            /**
             * 图表数据
             */
            heatList: [],
            heatChartOptions: {},
            flowChartOptions: {},
            pressureChartOptions: {},
            deviceOnlineChartOptions: {},
            requestFlag1: false,
            intervale1: 0,
            full: {
                '实时温度曲线': false,
                '实时热量流量曲线': false,
                '实时压力曲线': false,
                '实时设备状态': false
            },
        }
    },
    created() {
        this.init()
    },
    methods: {
        handleFullScreen(name) {
            this.full[name] = !this.full[name]
        },
        handleDownload(name) {
        
        },
        init() {
            api_station.list().then(res => {
                this.stationList = res
                if (res.length) {
                    this.queryParam.station_id = res[0].id
                    this.onSearch()
                }
            })
        },
        onSearch() {
            this.heatList = []
            this.heatChartOptions = null
            this.flowChartOptions = null
            this.pressureChartOptions = null
            this.deviceOnlineChartOptions = null
            this.clearIntervalFun()
            
            api_station_data_current.heatList({
                station_id: this.queryParam.station_id,
                start_time: this.heatList.length ? this.heatList[this.heatList.length - 1].create_time : undefined
            }).then(res => {
                this.heatList = [...this.heatList, ...res]
                let xData = [],
                    // 图1
                    data1 = [],
                    data2 = [],
                    data3 = [],
                    data4 = [],
                    // 图2
                    data5 = [],
                    data6 = [],
                    // 图3
                    data7 = [],
                    data8 = [],
                    data9 = [],
                    data10 = [],
                    // 图4
                    data11 = [],
                    data12 = [],
                    data13 = [];
                
                res.forEach(el => {
                    xData.push(el.create_time.split(' ')[1])
                    // 图1
                    data1.push(el.post_heat_1 || 0)
                    data2.push(el.get_heat_1 || 0)
                    data3.push(el.post_heat_2 || 0)
                    data4.push(el.get_heat_2 || 0)
                    // 图2
                    data5.push(el.flow_1 || 0)
                    data6.push(el.heat_1 || 0)
                    // 图3
                    data7.push(el.post_pressure_1 || 0)
                    data8.push(el.get_pressure_1 || 0)
                    data9.push(el.post_pressure_2 || 0)
                    data10.push(el.get_pressure_2 || 0)
                    // 图4
                    data11.push(el.opening || 0)
                    data12.push(el.cycle || 0)
                    data13.push(el.post_cycle || 0)
                })
                this.heatChartOptions = {
                    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {
                                show: true,
                                iconStyle: {}
                            }
                        }
                    },
                    legend: {
                        left: 0,
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisLabel: {
                                interval: this.queryParam.interval * 60 / 2 - 1,
                                color: '#fff'
                            },
                            data: xData,
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                color: '#fff'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '一网供水温度',
                            type: 'line',
                            
                            smooth: true,
                            lineStyle: {
                                width: 1
                            },
                            showSymbol: false,
                            // areaStyle: {
                            //     opacity: 0.8,
                            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            //         {
                            //             offset: 0,
                            //             color: 'rgb(128, 255, 165)'
                            //         },
                            //         {
                            //             offset: 1,
                            //             color: 'rgb(1, 191, 236)'
                            //         }
                            //     ])
                            // },
                            emphasis: {
                                focus: 'series'
                            },
                            data: data1
                        },
                        {
                            name: '一网回水温度',
                            type: 'line',
                            
                            smooth: true,
                            lineStyle: {
                                width: 1
                            },
                            showSymbol: false,
                            // areaStyle: {
                            //     opacity: 0.8,
                            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            //         {
                            //             offset: 0,
                            //             color: 'rgb(0, 221, 255)'
                            //         },
                            //         {
                            //             offset: 1,
                            //             color: 'rgb(77, 119, 255)'
                            //         }
                            //     ])
                            // },
                            emphasis: {
                                focus: 'series'
                            },
                            data: data2
                        },
                        {
                            name: '二网供水温度',
                            type: 'line',
                            
                            smooth: true,
                            lineStyle: {
                                width: 1
                            },
                            showSymbol: false,
                            // areaStyle: {
                            //     opacity: 0.8,
                            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            //         {
                            //             offset: 0,
                            //             color: 'rgb(55, 162, 255)'
                            //         },
                            //         {
                            //             offset: 1,
                            //             color: 'rgb(116, 21, 219)'
                            //         }
                            //     ])
                            // },
                            emphasis: {
                                focus: 'series'
                            },
                            data: data3
                        },
                        {
                            name: '二网回水温度',
                            type: 'line',
                            
                            smooth: true,
                            lineStyle: {
                                width: 1
                            },
                            showSymbol: false,
                            // areaStyle: {
                            //     opacity: 0.8,
                            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            //         {
                            //             offset: 0,
                            //             color: 'rgb(255, 0, 135)'
                            //         },
                            //         {
                            //             offset: 1,
                            //             color: 'rgb(135, 0, 157)'
                            //         }
                            //     ])
                            // },
                            emphasis: {
                                focus: 'series'
                            },
                            data: data4
                        },
                    ]
                }
                this.flowChartOptions = {
                    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {
                                show: true,
                                iconStyle: {}
                            }
                        }
                    },
                    legend: {
                        left: 0,
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisLabel: {
                                interval: this.queryParam.interval * 60 / 2 - 1,
                                color: '#fff'
                            },
                            data: xData
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                color: '#fff'
                                
                            }
                        }
                    ],
                    series: [
                        {
                            name: '一网瞬时流量',
                            type: 'line',
                            
                            smooth: true,
                            lineStyle: {
                                width: 1
                            },
                            showSymbol: false,
                            // areaStyle: {
                            //     opacity: 0.8,
                            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            //         {
                            //             offset: 0,
                            //             color: 'rgb(128, 255, 165)'
                            //         },
                            //         {
                            //             offset: 1,
                            //             color: 'rgb(1, 191, 236)'
                            //         }
                            //     ])
                            // },
                            emphasis: {
                                focus: 'series'
                            },
                            data: data5
                        },
                        {
                            name: '一网瞬时热量',
                            type: 'line',
                            
                            smooth: true,
                            lineStyle: {
                                width: 1
                            },
                            showSymbol: false,
                            // areaStyle: {
                            //     opacity: 0.8,
                            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            //         {
                            //             offset: 0,
                            //             color: 'rgb(0, 221, 255)'
                            //         },
                            //         {
                            //             offset: 1,
                            //             color: 'rgb(77, 119, 255)'
                            //         }
                            //     ])
                            // },
                            emphasis: {
                                focus: 'series'
                            },
                            data: data6
                        },
                    ]
                }
                this.pressureChartOptions = {
                    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {
                                show: true,
                                iconStyle: {}
                            }
                        }
                    },
                    legend: {
                        left: 0,
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisLabel: {
                                interval: this.queryParam.interval * 60 / 2 - 1,
                                color: '#fff'
                            },
                            data: xData
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                color: '#fff'
                                
                            }
                        }
                    ],
                    series: [
                        {
                            name: '一网供水压力',
                            type: 'line',
                            
                            smooth: true,
                            lineStyle: {
                                width: 1
                            },
                            showSymbol: false,
                            // areaStyle: {
                            //     opacity: 0.8,
                            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            //         {
                            //             offset: 0,
                            //             color: 'rgb(128, 255, 165)'
                            //         },
                            //         {
                            //             offset: 1,
                            //             color: 'rgb(1, 191, 236)'
                            //         }
                            //     ])
                            // },
                            emphasis: {
                                focus: 'series'
                            },
                            data: data7
                        },
                        {
                            name: '一网回水压力',
                            type: 'line',
                            
                            smooth: true,
                            lineStyle: {
                                width: 1
                            },
                            showSymbol: false,
                            // areaStyle: {
                            //     opacity: 0.8,
                            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            //         {
                            //             offset: 0,
                            //             color: 'rgb(0, 221, 255)'
                            //         },
                            //         {
                            //             offset: 1,
                            //             color: 'rgb(77, 119, 255)'
                            //         }
                            //     ])
                            // },
                            emphasis: {
                                focus: 'series'
                            },
                            data: data8
                        },
                        {
                            name: '二网供水压力',
                            type: 'line',
                            
                            smooth: true,
                            lineStyle: {
                                width: 1
                            },
                            showSymbol: false,
                            // areaStyle: {
                            //     opacity: 0.8,
                            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            //         {
                            //             offset: 0,
                            //             color: 'rgb(55, 162, 255)'
                            //         },
                            //         {
                            //             offset: 1,
                            //             color: 'rgb(116, 21, 219)'
                            //         }
                            //     ])
                            // },
                            emphasis: {
                                focus: 'series'
                            },
                            data: data9
                        },
                        {
                            name: '二网回水压力',
                            type: 'line',
                            
                            smooth: true,
                            lineStyle: {
                                width: 1
                            },
                            showSymbol: false,
                            // areaStyle: {
                            //     opacity: 0.8,
                            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            //         {
                            //             offset: 0,
                            //             color: 'rgb(255, 0, 135)'
                            //         },
                            //         {
                            //             offset: 1,
                            //             color: 'rgb(135, 0, 157)'
                            //         }
                            //     ])
                            // },
                            emphasis: {
                                focus: 'series'
                            },
                            data: data10
                        },
                    ]
                }
                this.deviceOnlineChartOptions = {
                    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {
                                show: true,
                                iconStyle: {}
                            }
                        }
                    },
                    legend: {
                        left: 0,
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisLabel: {
                                interval: this.queryParam.interval * 60 / 2 - 1,
                                color: '#fff'
                            },
                            data: xData,
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                color: '#fff'
                                
                            }
                        }
                    ],
                    series: [
                        {
                            name: '电动阀开度',
                            type: 'line',
                            
                            smooth: true,
                            lineStyle: {
                                width: 1
                            },
                            showSymbol: false,
                            // areaStyle: {
                            //     opacity: 0.8,
                            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            //         {
                            //             offset: 0,
                            //             color: 'rgb(128, 255, 165)'
                            //         },
                            //         {
                            //             offset: 1,
                            //             color: 'rgb(1, 191, 236)'
                            //         }
                            //     ])
                            // },
                            emphasis: {
                                focus: 'series'
                            },
                            data: data11
                        },
                        {
                            name: '循环泵频率',
                            type: 'line',
                            
                            smooth: true,
                            lineStyle: {
                                width: 1
                            },
                            showSymbol: false,
                            // areaStyle: {
                            //     opacity: 0.8,
                            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            //         {
                            //             offset: 0,
                            //             color: 'rgb(0, 221, 255)'
                            //         },
                            //         {
                            //             offset: 1,
                            //             color: 'rgb(77, 119, 255)'
                            //         }
                            //     ])
                            // },
                            emphasis: {
                                focus: 'series'
                            },
                            data: data12
                        },
                        {
                            name: '补水泵频率',
                            type: 'line',
                            
                            smooth: true,
                            lineStyle: {
                                width: 1
                            },
                            showSymbol: false,
                            // areaStyle: {
                            //     opacity: 0.8,
                            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            //         {
                            //             offset: 0,
                            //             color: 'rgb(55, 162, 255)'
                            //         },
                            //         {
                            //             offset: 1,
                            //             color: 'rgb(116, 21, 219)'
                            //         }
                            //     ])
                            // },
                            emphasis: {
                                focus: 'series'
                            },
                            data: data13
                        },
                    ]
                }
                this.requestFlag1 = true
                this.intervale1 = setInterval(() => {
                    if (this.requestFlag1) {
                        this.requestFlag1 = false
                        api_station_data_current.heatList({
                            station_id: this.queryParam.station_id,
                            start_time: this.heatList.length ? this.heatList[this.heatList.length - 1].create_time : undefined
                        }).then(res2 => {
                            this.heatList = [...this.heatList, ...res2]
                            if (this.heatList.length > 150) {
                                xData.shift(res2.length)
                                data1.shift(res2.length)
                                data2.shift(res2.length)
                                data3.shift(res2.length)
                                data4.shift(res2.length)
                                data5.shift(res2.length)
                                data6.shift(res2.length)
                                data7.shift(res2.length)
                                data8.shift(res2.length)
                                data9.shift(res2.length)
                                data10.shift(res2.length)
                                data11.shift(res2.length)
                                data12.shift(res2.length)
                                data13.shift(res2.length)
                            }
                            res2.forEach(el => {
                                xData.push(el.create_time.split(' ')[1])
                                data1.push(el.post_heat_1 || 0)
                                data2.push(el.get_heat_1 || 0)
                                data3.push(el.post_heat_2 || 0)
                                data4.push(el.get_heat_2 || 0)
                                data5.push(el.flow_1 || 0)
                                data6.push(el.heat_1 || 0)
                                // 图3
                                data7.push(el.post_pressure_1 || 0)
                                data8.push(el.get_pressure_1 || 0)
                                data9.push(el.post_pressure_2 || 0)
                                data10.push(el.get_pressure_2 || 0)
                                // 图4
                                data11.push(el.opening || 0)
                                data12.push(el.cycle || 0)
                                data13.push(el.post_cycle || 0)
                            })
                            this.requestFlag1 = true
                        })
                    }
                }, 2000)
            })
        },
        getHeatChartOption() {
        },
        getFlowChartOption() {
        },
        getPressureChartOption() {
        },
        getDeviceOnlineChartOption() {
        },
        clearIntervalFun() {
            clearInterval(this.intervale1)
            this.intervale1 = null
        },
        handleExport() {
            this.request.export().then(res => {
                console.log(res)
                DownloadFile(res, '报表.xls')
            })
        }
    },
    beforeDestroy() {
        this.clearIntervalFun()
    }
}
</script>
<style>
.full {
    width: 100% !important;
    height: 100% !important;
    position: fixed;
    left: 0,;
    top: 0;
    z-index: 9999;
}

.ant-card {
    display: flex;
    flex-direction: column;
    
}

.ant-card .ant-card-body {
    flex-grow: 1;
}
</style>